<template>
  <div style="min-height:100vh;" class="wrapper">
    <!--头部-->
    <Top />
    <!-- 回到顶部 -->
    <el-backtop target=".wrapper" style="height:100px;width:100px;">
      <i class="el-icon-caret-top" style="font-size:50px;"></i>
    </el-backtop>
    <!--tabs-->
    <mu-tabs :value.sync="active1" inverse text-color="rgba(0, 0, 0, .54)"  full-width  style="width:100%;background-color:#ffffff;">
      <mu-tab style="font-size:36px;">全部文章</mu-tab>
      <mu-tab style="font-size:36px;">热门文章</mu-tab>
    </mu-tabs>
    <!--全部blog列表-->
    <div class="demo-text" v-if="active1 === 0">


      <div style="width:100%;padding:20px 0;">
        <div class="grid-content bg-purple blog_bg_left" v-loading="loading">

          <el-row :gutter="20">
            <el-col :span="12"><div style="margin: 15px 0px 15px 20px;color: blueviolet;font-size: 35px;">文章</div></el-col>
            <el-col :span="12"><div style="float: right;margin: 10px 20px 0px 0px;font-size:35px;">共 <span style="font-size: 43px;color: rgb(6, 154, 240);">{{total}}</span> 篇</div></el-col>
          </el-row>

          <!-- 分割线 -->
          <div class="fenge"></div>

          <!-- 文章 -->
          <div>
            <div class="blog_card" v-for="(item,index) in blogData" :key="index" >

<!--              <router-link :to="'/blog/'+item.id">-->
              <div @click="goToBlog(item.id)">
                <el-card :body-style="{ padding: '15px' }" style="max-width:100%;min-height:300px;" >
                  <el-row :gutter="20">
                    <el-col :span="15">
                      <div>
                        <div style="font-size:40px;font-weight:bold;">{{item.title}}</div>
                        <div style="font-size: 35px;min-height:100px;">{{item.description}}</div>
                      </div>
                    </el-col>
                    <el-col :span="9">
                      <div style="width:100%;height:180px;" v-lazy-container="{ selector: 'img' }">
<!--                        <el-image-->
<!--                            style="width: 100%; height: 100%"-->
<!--                            :src="item.firstPicture"-->
<!--                        >-->
<!--                        </el-image>-->
                        <img
                            style="width: 100%; height: 100%"
                            :data-src="item.firstPicture"
                        />
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <div style="margin-bottom:20px;margin-top:10px;">
                      <el-tag style="margin-right: 10px;font-size:30px;" ><span> {{item.flag}}</span></el-tag>
                      <el-tag style="margin-right: 10px;font-size:30px;" type="success"><span> {{item.ttype.name}}</span></el-tag>
                      <el-tag style="margin-right: 10px;font-size:30px;" type="info" v-for="tag in item.tblogTags"><span> {{tag.ttag.name}}</span></el-tag>
                    </div>
                  </el-row>
                  <el-row>
                    <div style="height:40px;line-height:40px;">
                      <i style="margin-left: 20px;" class="el-icon-date"><span style="font-size: 30px;"> {{item.createTime}}</span></i>
                      <i style="margin-left: 20px;" class="el-icon-view"><span style="font-size: 30px;"> {{item.views}}</span></i>
                      <i style="margin-left: 20px;" class="el-icon-chat-line-square"><span style="font-size: 30px;"> {{item.commentCount}}</span></i>
                    </div>
                  </el-row>

                </el-card>
                </div>
<!--              </router-link>-->

              <el-divider></el-divider>

            </div>
          </div>

          <div style="height:100px;max-width:100%;">
            <!-- 分页 -->
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="size"
                layout="total, prev, pager, next"
                :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>

    </div>

    <!--热门文章-->
    <div class="demo-text" v-if="active1 === 1">

      <div style="width:100%;padding:20px 0;">
        <div class="grid-content bg-purple blog_bg_left" v-loading="loadingHot">

          <el-row :gutter="20">
            <el-col :span="12"><div style="margin: 15px 0px 15px 20px;color: blueviolet;font-size: 35px;">热门文章</div></el-col>
            <el-col :span="12"><div style="float: right;margin: 10px 20px 0px 0px;font-size:35px;font-weight:bold;color:#2E9AFE;">Top5</div></el-col>
          </el-row>

          <!-- 分割线 -->
          <div class="fenge"></div>

          <!-- 文章 -->
<!--          <el-card class="box-card" style="width:95%;margin: 20px auto 0 auto;min-height:300px;background-color: red;">-->
            <div class="text item" v-for="(item,index) in HotBlog" :key="index" style="padding:20px;background-color: white;">
<!--              <router-link :to="'/blog/'+ item.id">-->
              <div @click="goToHotBlog(item.id)">
                <el-link :underline="false">
                      <span style="font-size: 30px;">
                        <el-tag style="font-size:30px;">{{index + 1}}</el-tag> {{item.title}}
                        <i style="margin-left: 5px;" class="el-icon-view"><span style="font-size: 30px;"> {{item.views}}</span></i>
                      </span>
                </el-link>
              </div>
<!--              </router-link>-->
              <div v-if="index!=4" style="background-color: #DCDFE6;height: 1px;margin: 12px 0;"></div>
            </div>
<!--          </el-card>-->

        </div>
      </div>
    </div>

    <!--占位-->
    <div style="height:200px;"></div>

    <div v-if="active1 === 0" :class="loading ? 'start-record' : 'record'">
      <div class="record-img">
        <img src="../assets/image/bah.webp" />
      </div>
      <div>
        <a href="https://beian.miit.gov.cn/" class="record-text">粤ICP备2021166849号</a>
      </div>
    </div>

    <div v-else="active1 === 1" class="start-record">
      <div class="record-img">
        <img src="../assets/image/bah.webp" />
      </div>
      <div>
        <a href="https://beian.miit.gov.cn/" class="record-text">粤ICP备2021166849号</a>
      </div>
    </div>

  </div>
</template>

<script>
import Top from '@/components/move/Top'
export default {
  name: 'MoveIndex',
  components:{Top},
  data () {
    return {
      active1: 0,
      blogData:[],
      HotBlog:[], //热门文章
      types: [],
      total:0,
      currentPage:1,
      size:5,
      source: "blog",
      key:0,
      loading: true,
      loadingHot: true,
    }
  },

  created(){
    this.initBlog()   //页面加载时调用
    this.initHotBlog()   //页面加载时调用
    this.initAllType()   //页面加载时调用
  },
  mounted() {
    this.active1 = this.$store.getters.getActive1
    this.key = this.$store.getters.getHomeVal


    // this.url = window.location.href
    // this.url = this.$route.path
    // this.hash = document.URL
    // console.log("index")
    // console.log(window.history.length)

  },
  activated(){
    // 检测返回后页面是否跟随路由一起更新了
    // let currentPath = window.location.hash.slice(1)
    // console.log("currentPath:"+ currentPath)
    // console.log("this.$route.path:"+this.$route.path)
    // if (this.$route.path !== currentPath) {
    //   this.$router.push(currentPath)
    //   // location. reload()
    // }
  },
  updated(){
    // console.log("执行了")
    var _this = this
    this.changeblogCountFun(_this.total)
  },
  methods: {
    go(){
      this.$router.push('/a')
    },

    // 初始化博客列表数据
    initBlog() {
      const _this = this

      this.currentPage = this.$store.getters.getHomeVal
      this.axios.get('/blog/vuefindByPage?current=' + this.currentPage + '&size=' + this.size + '&source=' + this.source).then(resp => {
        // console.log("初始博客列表数据")
        // console.log(resp)
        _this.blogData = resp.data.obj.blogList
        _this.total = resp.data.obj.totals
        this.changeblogCountFun(resp.data.obj.totals)
        this.loading = false
      })
    },
    //给store中的文章数传值
    changeblogCountFun(total) {
      this.$store.dispatch("changeblogCountFun", total)
    },
    //初始化热门文章
    initHotBlog() {
      const _this = this
      this.axios.get('/blog/vuefindHotBlog').then(resp => {
        // console.log("初始化热门文章")
        // console.log(resp)
        _this.HotBlog = resp.data.obj
        this.loadingHot = false
      })
    },
    //查询所有分类
    initAllType() {
      const _this = this
      this.axios.get('/type/getAllType').then(resp => {
        // console.log(resp)
        _this.types = resp.data.obj
      })
    },

    goToBlog(id){
      this.$loading({
        text:'玩命加载中，请稍等...',
      });

      // this.$router.replace({path: '/blog/'+id})
      this.$router.push('/blog/'+id)
      this.changeSourceFun("blog")
      this.changeActive1Fun(0)
    },

    goToHotBlog(id){
      this.$router.push('/blog/'+id)
      this.changeSourceFun("blog")
      this.changeActive1Fun(1)
    },

    // 翻页后滚动条回到页面顶端
    scrollTop(selector) {
      let element = selector && document.querySelector(selector) || window;
      element.scrollTo(0, 0);
    },

    //分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      const _this = this
      this.loading = true
      this.axios.get('/blog/vuefindByPage?current=' + val + '&size=' + this.size + '&source=' + this.source).then(resp => {
        // console.log(resp)
        this.loading = false

        _this.blogData = resp.data.obj.blogList
        _this.total = resp.data.obj.totals

        //找到你想要滚到顶部的元素scrollTop=0
        this.scrollTop();

        this.changeHomeValFun(val)
      })
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },

    //  改变store中homeVal的值
    changeHomeValFun(val){
      this.$store.dispatch("changeHomeValFun",val)
    },

    // 改变store中source的值
    changeSourceFun(source){
      this.$store.dispatch("changeSourceFun",source)
    },

  //  改变store中active1的值
    changeActive1Fun(active1){
      this.$store.dispatch("changeActive1Fun",active1)
    },
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.img img{
  width:100%;
  height:180px;
}

/* 分割线 */
.fenge{ height:3px; border:none; border-top:3px solid  #1eb9e0;margin-bottom:20px;}

.blog_bg_left{
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   width: 95%;
   min-height: 500px;
   margin: 0 auto;
 }

.blog_card{
  width: 95%;
  margin: 2%;
}

.start-record{
  width: 100%;
  height: 3rem;
  line-height: 10px;
  background-color: black;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
}

.record{
  width: 100%;
  height: 3rem;
  line-height: 10px;
  background-color: black;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.record-img{
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 5px;
}

.record-img img{
  width: 100%;
  height: 100%;
}

.record-text{
  font-size: 1.5rem;
  color: rgb(249, 249, 249);
}

</style>